<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/WEB-INF/page/common/commonPage.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单列表</title>
    <link rel="stylesheet" type="text/css" href="${resourcesUrl}/common/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${resourcesUrl}/common/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="${resourcesUrl}/common/css/smartadmin-production.min.css">
    <style>
        .menu-item {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .child-menu {
            margin-left: 30px;
            display: none;
        }
        .menu-actions {
            float: right;
        }
    </style>
</head>
<body>
    <%@ include file="/WEB-INF/page/common/header.jsp"%>
    <%@ include file="/WEB-INF/page/common/leftSideBar.jsp"%>

    <div id="main" role="main">
        <div id="ribbon">
            <ol class="breadcrumb">
                <li>首页</li>
                <li>菜单管理</li>
                <li>菜单列表</li>
            </ol>
        </div>
        <div id="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="jarviswidget">
                        <header>
                            <h2><i class="fa fa-list"></i> 菜单列表</h2>
                            <div class="widget-toolbar">
                                <a href="${base}/backmenu/add" class="btn btn-primary">
                                    <i class="fa fa-plus"></i> 添加菜单
                                </a>
                            </div>
                        </header>
                        <div class="widget-body">
                            <div class="menu-list">
                                <c:forEach items="${parentMenus}" var="parent">
                                    <div class="menu-item">
                                        <div class="menu-header">
                                            <span class="toggle-btn" data-id="${parent.menuId}">
                                                <i class="fa fa-plus-square-o"></i>
                                            </span>
                                            <span class="menu-name">${parent.menuName}</span>
                                            <span class="menu-name-us">(${parent.menuNameUs})</span>
                                            <div class="menu-actions">
                                                <button class="btn btn-xs btn-primary" onclick="window.location.href='${base}/backmenu/edit?menuId=${parent.menuId}'">
                                                    <i class="fa fa-edit"></i> 编辑
                                                </button>
                                                <button class="btn btn-xs btn-danger" onclick="deleteMenu('${parent.menuId}')">
                                                    <i class="fa fa-trash-o"></i> 删除
                                                </button>
                                            </div>
                                        </div>
                                        <div id="child-${parent.menuId}" class="child-menu">
                                            <c:forEach items="${childMenusMap[parent.menuId]}" var="child">
                                                <div class="menu-item">
                                                    <span class="menu-name">${child.menuName}</span>
                                                    <span class="menu-name-us">(${child.menuNameUs})</span>
                                                    <div class="menu-actions">
                                                        <button class="btn btn-xs btn-primary" onclick="window.location.href='${base}/backmenu/edit?menuId=${child.menuId}'">
                                                            <i class="fa fa-edit"></i> 编辑
                                                        </button>
                                                        <button class="btn btn-xs btn-danger" onclick="deleteMenu('${child.menuId}')">
                                                            <i class="fa fa-trash-o"></i> 删除
                                                        </button>
                                                    </div>
                                                </div>
                                            </c:forEach>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="${resourcesUrl}/common/js/jquery-1.8.2.min.js"></script>
    <script src="${resourcesUrl}/common/js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // 展开/收起子菜单
            $('.toggle-btn').click(function() {
                var menuId = $(this).data('id');
                var childMenu = $('#child-' + menuId);
                var icon = $(this).find('i');
                
                if(childMenu.is(':visible')) {
                    childMenu.slideUp();
                    icon.removeClass('fa-minus-square-o').addClass('fa-plus-square-o');
                } else {
                    childMenu.slideDown();
                    icon.removeClass('fa-plus-square-o').addClass('fa-minus-square-o');
                }
            });
        });
        
        // 删除菜单
        function deleteMenu(menuId) {
            if(confirm('确定要删除该菜单吗？')) {
                $.ajax({
                    url: '${base}/backmenu/delete',
                    type: 'POST',
                    data: {menuId: menuId},
                    success: function(data) {
                        if(data.RET_CODE === 'success') {
                            alert('删除成功');
                            window.location.reload();
                        } else {
                            alert(data.RET_MSG || '删除失败');
                        }
                    }
                });
            }
        }
    </script>
</body>
</html> 